<template>
	<view class="page">
		
		<view class="search-block">
			
			<view class="search-ico-wapper">
				<image src="../../static/icos/search.png" class="search-ico"></image>
			</view>
			
			<input 
				type="text"
				placeholder="搜索预告" 
				maxlength="10" 
				class="search-text" 
				confirm-type="search"
				@confirm="searchMe"
			/>
			
		</view>
		
		<view class="movie-list page-block">
			
			<!-- <view class="movie-wapper" v-for="trailer in trailerList">
				<image 
					:src="trailer.cover" 
					:data-trailerId="trailer.id"
					@click="showTrailer"
					class="poster"></image>
			</view> -->
			
			<!-- <view class="movie-wapper" >
				<image src="http://122.152.205.72:88/superhero/MARVEL/CaptainMarvel/cover.jpg" class="poster"></image>
			</view> -->
			
			<view class="movie-wapper aaaa" v-for="(movie,index) in trailerList" :key="index">
				<image :src="movie.images.small"
					   :data-movieId = "movie.id"
					    @click="movie_detail" class="poster"></image>
				<view class="search_movie_title">{{movie.title}}</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				trailerList: [],
				keywords: "",			// 搜索的关键字
				page: 1,				// 当前第几页
				totalPages: 1,			// 总页数
				top250_data_storage:[],
				
				can_ref:true //是否进行分页数据获取
			};
		},
		onLoad() {
			//uni.clearStorage();
			
			this.set_json_data();
			
		},
		onReachBottom() {
			this.pagedTrailerList()
		},
		methods: {
			movie_detail(e){
				console.log(e);
				var movieid = e.currentTarget.dataset.movieid;
				uni.navigateTo({
					url:"../detail/detail?movieid="+ movieid,
				})
			},
			pagedTrailerList() {
				if(!this.can_ref){
					return;
				}
				uni.getStorage({
					key: 'top250_data',
					success: res => {
						
						if(this.page*15 >=55){
							this.can_ref = true;
							return;
						}
						
						this.trailerList = res.data.slice(0,this.page*15);
						console.log(this.trailerList.length);
						
						this.page += 1;
					},
					
				});
				
			},
			searchMe(e) {
				console.log(e)
				// 获取搜索的内容
				var value = e.detail.value;
				console.log(value)
				if(!value){
					this.set_json_data()();
					return;
				}
				this.trailerList = [];
				
				uni.getStorage({
					key: 'top250_data',
					success: res => {
						res.data.forEach((item,index,origin) =>{
						
							var reg = new RegExp(value);
							
							if(item.title.match(reg)){

								//匹配成功do something
								this.trailerList.push(item)
							}
							
						})
					}
				});
				
				//this.pagedTrailerList(value, 1, 15);
			},
			//初始化界面 家在数据
			
			set_json_data(){
				var json_data = require('../../static/mock_json/top250.json');
				console.log(json_data);
				uni.setStorage({
					key: 'top250_data',
					data: json_data.subjects,
					success: () => {
						console.log('setStorage success');
						this.trailerList = json_data.subjects.slice(0,12);
						
						// this.trailerList = json_data.subjects;
						// console.log(json_data.subjects);
						// console.log(this.trailerList);
					}
				});
				
			}
		
		}
	}
</script>

<style>
	@import url("search.css"); 
</style>
